<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>吕楠</title>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>
		<audio src="我的梦.mp3" autoplay="autoplay"></audio>
		<div class="swiper-pagination" id="nav">
			<a href="###" swiper-pagination-swith>自我介绍</a>
			<a href="###" swiper-pagination-swith>工作经验</a>
			<a href="###" swiper-pagination-swith>项目介绍</a>
			<a href="###" swiper-pagination-swith>联系方式</a>
		</div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide" style="background-color: black; margin-bottom: 0px;">
					<div class="cont ">
						<div id="pho" class="photo"></div>
						<div class="font ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.8s" swiper-animate-delay="0s">
							<p>姓名：吕楠</p>
							<p>性别：女</p>
							<p>学历：本科</p>
							<p>专业：软件工程</p>
							<p>个人评价：</p>
							<p>我是典型的90后女孩，有着和同龄人差不多的爱好，喜欢休闲娱乐项目</p>
							<p>但我更喜欢静下心来画画，还有我喜欢跳广场舞</p>
							<p>我也是典型的天蝎座，刚接触的时候会很含蓄，实质内心是热情奔放的</p>
							<p>与天蝎座不同的是我乐观洒脱不斤斤计较不愿将事情放在心上</p>
							<p>但我有责任有上进心而且很倔强，想要做的就想要做好</p>
							<p>我喜欢用乐观向上的心态对待任何事情</p>
							<p>我不愿浪费时间，总想让自己的每一天快乐充实精彩</p>
						</div>
					</div>
				</div>
				<div class="swiper-slide" style="background-color: black; margin-bottom: 0px;">
					<div class="expswiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide" id="self" style="background-color: black; margin-bottom: 0px;">
								<div class="cont">
									<div class="font2 ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0s">
										<p>时间：2015/07 -- 至今</p>
										<p>公司：上海百弓网络科技有限公司</p>
										<p>职位：web前端工程师</p>
										<p>工作职责：</p>
										<p>1、主要职责是参与制定项目开发进度计划,保证按时按质量完成代码任务; </p>
										<p>2、与UI设计师协作,根据设计图运用HTML5和CSS特性构建PC端以及移动端界面, 响应式布局,浏览器兼容,书写符合W3C标准的代码;</p>
										<p>3、同时,在此基础之上,对完成的页面进行维护和网站性能的相应优化; </p>
										<p>4、运用JavaScript基本语法, 写出符合规范并且层次清晰地JS代码,完成网页的基本交互功能;</p>
										<p>5、与后端开发团队相互配合,完成网站的前后台数据交互,确保数据有效对接;</p>
										<p>6、运用AJAX调用后台提供的数据接口, 把返回的数据业务逻辑处理;</p>
										<p>7、利用php基本语法, mySql语句完成对数据库的简单操作;</p>
										<p>8、使用JQuery、Bootstrap、MUI、AngularJs等前端框架高效完成开发任务;</p>
										<p>9、协助测试人员完成项目测试, 后期对项目进行响应维护;</p>
									</div>
									<div class="more ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0s">
										<div class="skill">
											<div class="type">
												<a href="###">HTML/CSS</a>
											</div>
											<div class="type">
												<a href="###">Canvas</a>
											</div>
											<div class="type">
												<a href="###">JavaScript</a>
											</div>
											<div class="type">
												<a href="###">JQuery</a>
											</div>
											<div class="type">
												<a href="###">AngularJs</a>
											</div>
											<div class="type">
												<a href="###">PHP/Sql</a>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="swiper-slide" style="background-color: black; margin-bottom: 0px;">
								<div class="cont">
									<div class="effc">
										<div id="box" style="width:600px; height:600px">
											<canvas id="sphere" width="600" height="600" ></canvas>
											<div align="center">
												<button id="swi" onclick="startOrPause()">激活</button>
												<button onclick="setSpeed(-150,0)">向东</button>
												<button onclick="setSpeed(150,0)">向西</button>
												<button onclick="setSpeed(0,-150)">向南</button>
												<button onclick="setSpeed(0,150)">向北</button> 小球大小： <input type="range" min="10" max="30" value="10" step="2" onchange="changeObjectRadius(this.value)" />
											</div>
											<div align="center">
												<a id="tip_info">
												</a>
											</div>

										</div>
									</div>
								</div>
							</div>
							<div class="swiper-slide" style="background-color: black; margin-bottom: 0px;">
								<div class="cont">
									<div class="effc" id="canvas">
										<canvas id="mycanvas" width="1000" height="600"></canvas>
									</div>
								</div>
							</div>
						</div>
						<div class="swiper-button-next"></div>
						<div class="swiper-button-prev"></div>
					</div>
				</div>
				<div class="swiper-slide" id="pro" style="background-color: black; margin-bottom: 0px;">
					<div class="cont">

					</div>
				</div>
				<div class="swiper-slide" id="tel" style="background-color: black; margin-bottom: 0px;">
					<div class="cont">
						<p class="infor">C O N T A C T&nbsp;&nbsp;&nbsp;&nbsp;I N F O R M A T I O N</p>
						<div class="pho ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
							<img src="img/QQ图片20161116201206.jpg" />
							<img src="img/QQ图片20161116201219.jpg" />
						</div>
						<p class="botFont"><span>微信号/QQ：947581690</span><span>手机号：13889120142</span></p>
					</div>
				</div>
			</div>

		</div>

	</body>
	<script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.min-2.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var photo = document.querySelector("#pho");
		var types = document.querySelectorAll(".type");
		var imgs = document.querySelectorAll(".effc img");
		var obj = document.querySelector(".obj");

		photo.style.opacity = "1";
		photo.onmousemove = function() {
			photo.style.transform = "scale(" + 1.2 + ")";
		}
		photo.onmouseout = function() {
				photo.style.transform = "scale(" + 1 + ")";
			}
			//		淡入淡出
		var i = 0;
		var timer;

		function text(name, time) {
			if(i >= name.length) {
				i = 0;
			} else {
				for(var j = 0; j < name.length; j++) {
					name[j].style.color = "white";
					name[j].style.borderColor = "white";
				}
				name[i].style.color = "dimgrey";
				name[i].style.borderColor = "dimgrey";
				i++;
			}

		}
		timer = setInterval(function() {
			text(types, timer);
		}, 1000);

		for(var j = 0; j < types.length; j++) {
			types[j].index = j;
			types[j].onmousemove = function() {
				types[this.index].style.color = "gray";
				types[this.index].style.borderColor = "gray";
			}
			types[j].onmouseout = function() {
				types[this.index].style.color = "";
				types[this.index].style.borderColor = "";
			}
		}
		//动画
		var spaceX = 30; //X方向的密度
		var spaceY = 30; //Y方向的密度
		var PI = Math.PI; //数学角度π
		var radius = 200; //球的半径
		//弧度
		var radian = PI / 180; 	
		var speedX = 0; //X方向的速度
		var speedY = 0; //Y方向的速度
		var offsetX = 300; //X方向的偏移量相当于将球的中心X坐标移之到画布中央
		var offsetY = 300; //Y方向的偏移量相当于将球的中心Y坐标移之到画布中央
		var spheres = new Array(); //存储像素点
		var canvas; //画布
		var context; //上下文
		var focalLength = 300; //控制球距离屏幕的距离
		var start = true; //是否启动
		var sx = 0; //sinx
		var cx = 0; //cosx
		var sy = 0; //siny
		var cy = 0; //cosy
		var sz = 0; //sinz
		var cz = 0; //cosz
		var innerStaColor = "GREEN"; //表示内部颜色
		var outerStaColor = "RED"; //外部颜色
		var objectRadius = 10; //绘制原点半径
		var scaleRatio = 0;

		var cameraView = {
			x: 0,
			y: 0,
			z: 0,
			rotX: 0,
			rotY: 0,
			rotZ: 0
		}; //视角角度
		/**
			author:qingfeilee
			date:2012-03-28
			description:初始化系统画布信息
		**/
		function initCanvas() {
			try {
				canvas = document.getElementById("sphere");
				context = canvas.getContext("2d");
			} catch(e) {
				document.getElementById("tip_info").innerHTML = "您的浏览器不支持！";
			}
		}
		/**
			author:qingfeilee
			date:2012-03-28
			description:初始化小球实体
		**/
		function initSphere() {
			for(var i = spaceY; i < 180; i += spaceY) {
				for(var angle = 0; angle < 360; angle += spaceX) {
					var object = {};
					var x = Math.sin(radian * i) * radius;

					object.x = Math.cos(angle * radian) * x;
					object.y = Math.cos(radian * i) * radius;
					object.z = Math.sin(angle * radian) * x;
					object.glow = .5; //亮度的范围
					spheres.push(object);
				}
			}
		}
		/**
			author:qingfeilee
			date:2012-03-28
			description:初始化系统函数
		**/
		function init() {
			initCanvas();
			initSphere();
			setInterval(this.update, 1000 / 60, this);
			setTimeout(function() {
					start = false;
				},
				1000);
		}
		/**
			author:qingfeilee
			date:2012-03-28
			description:设置整个大球的运转速度
		**/
		function setSpeed(speedX, speedY) {
			this.speedX = speedX;
			this.speedY = speedY;
		}
		/**
			author:qingfeilee
			date:2012-03-28
			description:更新整个球的状态以实现动态效果
		**/
		function update() {
			if(start) {
				setParam();
			}
		}
		/**
			author:qingfeilee
			date:2012-03-28
			description:设置各个小球的属性
		**/
		function setParam() {
			//根据速度大小计算出一次旋转的角度大小
			var rotYstep = speedX / 10000;
			var rotXstep = speedY / 10000;
			cameraView.rotY = rotYstep;
			cameraView.rotX = -rotXstep;
			//计算出对应的cos和sin
			sx = Math.sin(cameraView.rotX);
			cx = Math.cos(cameraView.rotX);
			sy = Math.sin(cameraView.rotY);
			cy = Math.cos(cameraView.rotY);
			sz = Math.sin(cameraView.rotZ);
			cz = Math.cos(cameraView.rotZ);

			// 设置画布的效果
			context.fillStyle = 'rgba(0,0,0,0.1)';
			context.fillRect(0, 0, canvas.width, canvas.height);

			var l = spheres.length - 1;

			for(var i = l,
					obj; obj = spheres[i]; i--) {
				render(obj);
			}
		}
		/**
			author:qingfeilee
			date:2012-03-28
			description:渲染整个画布
		**/
		function render(object) {
			var xy, xz, yx, yz, zx, zy;

			// 计算出物体的相对于照相机的位置
			var x = object.x - cameraView.x;
			var y = object.y - cameraView.y;
			var z = object.z - cameraView.z;

			// 绕X轴旋转
			xy = cx * y - sx * z;
			xz = sx * y + cx * z;
			// 绕Y轴旋转
			yz = cy * xz - sy * x;
			yx = sy * xz + cy * x;
			// 绕Z轴旋转
			zx = cz * yx - sz * xy;
			zy = sz * yx + cz * xy;
			//给各个球重新定位
			object.x = zx;
			object.y = zy;
			object.z = yz;

			//根据z轴数据来缩放球
			scaleRatio = focalLength / (focalLength + yz);
			scale = scaleRatio;

			if(object.glow > .5) {
				object.glow -= .02;
			}

			var sphereStyle = context.createRadialGradient(offsetX + object.x * scaleRatio, offsetY + object.y * scaleRatio,
				scaleRatio * .5, offsetX + object.x * scaleRatio, offsetY + object.y * scaleRatio, scaleRatio * objectRadius * .5);
			sphereStyle.addColorStop(0, innerStaColor);
			sphereStyle.addColorStop(object.glow, outerStaColor);
			sphereStyle.addColorStop(1, 'rgba(0,0,0,0)');

			context.fillStyle = sphereStyle;
			context.fillRect(offsetX + object.x * scaleRatio - scaleRatio * objectRadius * .5,
				offsetY + object.y * scaleRatio - scaleRatio * objectRadius * .5, scaleRatio * objectRadius, scaleRatio * objectRadius);
			document.getElementById("tip_info").innerHTML = "当前速度：" + speedX + "  " + speedY + "   小球半径：" + objectRadius;

		}
		/**
			author:qingfeilee
			date:2012-03-28
			description:冻结/激活真个大球状态
		**/
		function startOrPause() {
			if(start) {
				setTimeout(function() {
						start = false;
					},
					2000);
				document.getElementById("swi").innerHTML = "激活";
				innerStaColor = "GREEN";
				outerStaColor = "RED";
			} else {
				start = true;
				document.getElementById("swi").innerHTML = "2秒后冻结";
				innerStaColor = "RED";
				outerStaColor = "GREEN";
			}
		}

		function changeObjectRadius(val) {
			this.objectRadius = val;
		}
		window.addEventListener("load", init, true);
		//canvas
		var myCan = document.getElementById("mycanvas");
		var can = myCan.getContext("2d");

		function random(min, max) {
			return parseInt(Math.random() * (max - min + 1) + min)
		}

		function Cirl() {
			var r = random(10, 35);
			var speedX = random(r, 1000 - r);
			var speedY = random(r, 600 - r);
			var speedx = random(3, 10);
			var speedy = random(3, 10);
			var cColor = "rgb(255,255,255)";

			this.r = r;
			this.color = cColor;
			this.x = speedX;
			this.y = speedY;
			this.sx = speedx;
			this.sy = speedy;
		}
		Cirl.prototype.play = function() {
			can.beginPath();
			if(this.x >= 1000 - this.r || this.x <= this.r) {
				this.sx *= -1;
			}
			this.x += this.sx;
			if(this.y >= 600 - this.r || this.y <= this.r) {
				this.sy *= -1;
			}
			this.y += this.sy;
			can.fillStyle = this.color;
			can.globalAlpha = 0.5;
			can.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
			can.fill();
			can.closePath();
		}
		var a = [];
		for(var i = 0; i < 50; i++) {
			a[i] = new Cirl();
		}
		setInterval(function() {
			can.clearRect(0, 0, 1000, 600);
			for(var i = 0; i < a.length; i++) {
				a[i].play();
			}
		}, 20)
	</script>
	<script type="text/javascript">
		var swiper = new Swiper('.swiper-container', {
			pagination: '.swiper-pagination',
			direction: 'vertical',
			slidesPerView: 1,
			paginationClickable: true,
			mousewheelControl: true,
			simulateTouch: false,
			paginationType: 'custom',
			paginationElement: 'a',
			onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
				swiperAnimate(swiper); //初始化完成开始动画
				//		    swiperAnimateCache(swiper); //隐藏动画元素 
			},
			onSlideChangeEnd: function(swiper) {
				swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
			}
		});
		var exp = new Swiper('.expswiper-container', {
			direction: 'horizontal',
			grabCursor: true,
			effect: 'coverflow',
			centeredSlides: true,
			simulateTouch: false,
			nextButton: '.swiper-button-next',
			prevButton: '.swiper-button-prev',
			coverflow: {
				rotate: 30,
				stretch: 10,
				depth: 60,
				modifier: 2,
			}
		});
	</script>

</html>